import React, { memo, useEffect } from 'react';

import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { getRankingAction } from '../../store/actionCreators';

import ThemeHeaderRCMD from '@/components/theme-header-rcmd';
import { RankingWrapper } from "./style";
import RankingList from "@/components/ranking-list";

const RcmdRanking = memo(() => {
  const dispatch = useDispatch();

  const { upRanking, newRanking, originRanking } = useSelector(state => ({
    upRanking: state.getIn(["recommend", "upRanking"]),
    newRanking: state.getIn(["recommend", "newRanking"]), 
    originRanking: state.getIn(["recommend", "originRanking"])
  }), shallowEqual);

  useEffect(() => {
    //新歌榜
    dispatch(getRankingAction(3779629))
    //原创榜
    dispatch(getRankingAction(2884035))
    //飙升榜
    dispatch(getRankingAction(19723756))
  }, [dispatch])
  return (
    <RankingWrapper>
      <ThemeHeaderRCMD title="榜单" moreLink="/discover/ranking" />

      <div className="tops">
        <RankingList item={upRanking}/>
        <RankingList item={newRanking}/>
        <RankingList item={originRanking}/>
      </div>
    </RankingWrapper>
  )
})

export default RcmdRanking